<template>
	<ul class="nav-condition-ul">
		<li class="title"><a href="javascript:void(0)">{{name}}</a></li>
		<li v-if="showNoLimit" :class="{active: selections.length == 0 }" @click="handler(null)">
			<a href="javascript:void(0)" >不限</a>
		</li>
		<template v-for="item in list" :key="item.id">
			<li :class="{active: selections.includes(item.id) }"  @click="handler(item.id)">
				<a href="javascript:void(0)">{{ item.name }}</a>
			</li>
		</template>
	</ul>
</template>

<script>
export default {
	props: {
		name: {
			type: String,
			required: true
		},
		modelValue: {  // 选中的元素
			type: [Number, String, Array], 
			required: false,
			default: null ,
		},
		list: {   // 搜索条件
			type: Array, 
			required: true, 
		},
		showNoLimit: {  // 是否显示不限
			type: Boolean , required: false, default: true
		},
		multi: {type: Boolean , required: false, default: false} // 是否支持多选
	},
	data() {
		
		return {
			selections: this.modelValue === null ? [] : (typeof this.modelValue === 'object' || typeof this.modelValue === 'array' ? this.modelValue : [ this.modelValue ])
		}
	},
	emits: ["update:model-value", "change-condition"],
	methods: {
		handler(value) {
			if (value === null ) {
				this.$emit("update:model-value", value); 
				this.selections = [] ;
			}else if(!this.multi) {
				this.$emit("update:model-value", value);
				this.selections = [value] ;
			}else {
				let index = this.selections.findIndex(s => s === value) ;
				if (index != -1) {
					this.selections.splice(index, 1); // 删除
				}else {
					this.selections.push(value); // 添加
				}
				this.$emit("update:model-value", this.selections); 
			} 
			this.$emit("change-condition") ;
		}
	}
}
</script>

<style scoped>
ul , li {
	list-style: none;
}
.nav-condition-ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
}

.nav-condition-ul li {
    line-height: 35px;
    padding: 0 15px;
}

.nav-condition-ul .title {
    font-size: 16px;
    font-weight: 400;
    font-family: "Microsoft YaHei";
}

.nav-condition-ul a {
    color: #333;
}

.nav-condition-ul li.active {
    background-color: #ccc;
}

.nav-condition-ul li:hover:not(.title) {
    background-color: #e9e9e9;
}

</style>